<template>
  <view class="container">
    <view class="head">
      <view class="title">你好{{state.userInfoHead?.nickname}}</view>
      <view class="search">
        <uni-easyinput prefixIcon="search" class="searchInput" placeholder="搜索订单或老师" @blur="changeInput"></uni-easyinput>
      </view>
    </view>
    <view class="bottom">
      <view class="tabs">
        <view :class="['tabItem', state.tabCurrentId === item.id ? 'tabItemHover' : '']" v-for="(item, index) in tabs" :key="index" @click="changeTab(item)">
          <view class="left">
            <image :src="item?.icon"></image>
            <text>{{item?.name}}</text>
          </view> 
          <view class="line"></view>
        </view>
      </view>
      <!-- 底部内容 -->
      <UserInfo v-if="state.tabCurrentId == 1" @get-customer= "getCustomer" :userInfo="state.userInfo"/>
      <OrderPage v-if="state.tabCurrentId == 2" @get-orderlist="getOrderlist" :orderList="state.orderList"/>
      <FinancePage 
        v-if="state.tabCurrentId == 3" 
        @get-finance-list="getFinanceList" 
        @get-unpay="getUnpay"
        @get-pay="getPay"
        @get-cancellist="getCancellist"
        :statisticsInfo="state.statisticsInfo"
        :unPayInfo="state.unPayInfo"
        :payInfo="state.payInfo"
        :cancelList="state.cancelList"
      />
    </view>
  </view>
  <TabBar :active="0"/>
</template>

<script setup>
  import { tabs, tabs2 } from './data.js'
  import { ref, reactive, nextTick } from 'vue'
  import TabBar from '@/components/tabBar.vue'
  import OrderPage from './components/orderPage.vue'
  import FinancePage from './components/financePage.vue'
  import UserInfo from './components/userInfo.vue'
  import { getStudentIndex, getOrderIndex, financeStatistics, financePay, financeUnpay, getCancelList } from '@/utils/front.js'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  const state = reactive({
    tabCurrentId : 1,
    customerInfo: null,
    inputValue: '',
    orderList: [],
    userInfo: [],
    statisticsInfo: {},
    unPayInfo: [],
    payInfo: [],
    cancelList: {},
    userInfoHead: {}
  })
  onLoad(() => {
    // getCustomer(1,1)
    state.userInfoHead = uni.getStorageSync('userInfo')
  })
  onShow(() => {
    
  })
  const changeInput = (e) => {
    state.inputValue = e?.detail?.value
    nextTick(() => {
      if (state.tabCurrentId == 1) {
        getCustomer({tabId: 1, page: 1})
      } else if (state.tabCurrentId == 2) {
        getOrderlist({tabId: 1, page: 1})
      } else if (state.tabCurrentId == 3) {
        getUnpay({page: 1})
      }
      
    })
  }
  // 获取订单业务列表
  const getOrderlist = ({tabId, page}) => {
    console.log(69, tabId, page)
    let params = {
      type: tabId,
      search: state.inputValue,
      page: page,
      limit: 20     
    }
    getOrderIndex(params).then((res) => {
      if (res?.code == 1) {
        state.orderList = res?.result?.list
      }
    })
  }
  // 获取客户信息的方法
  const getCustomer = ({tabId, pageNo}) => {
    const params = {
      type : tabId,
      search: state.inputValue,
      page: pageNo,
      limit: 20    
    }
    getStudentIndex(params).then((res) => {  
        state.userInfo = res?.result?.list
    })
  }
  // 点击tab切换
  const changeTab = (item) => {
    state.tabCurrentId = item.id
    if (item?.id == 1) {
      getCustomer({tabId: 1, pageNo: 1})
    } else if(item?.id == 2){
      getOrderlist({tabId: 1, page: 1})
    } else if (item?.id == 3) {
      getUnpay({page: 1})
    }
  }
  // 财务总计
  const getFinanceList = ({page}) => {
    financeStatistics({}).then((res) => {
      console.log(108, res)
      if (res?.code == 1) {
        state.statisticsInfo = res?.result
      } 
    })
  }
  // 财务待结款
  const getUnpay = ({page}) => {
    let params = {
      search: state.inputValue,
      page: page,
      limit: 20
    }
    financeUnpay({...params}).then((res) => {
      if (res?.code == 1) {
        state.unPayInfo  = res?.result
      }
    })
  }
  // 财务结款
  const getPay = (page) => {
    financePay({}).then((res) => {
      if (res?.code == 1) {
        getUnpay({page: 1})
      }
    })
  }
  // 退单列表
  const getCancellist = (page) => {
    let params = {
      search: '',
      page: page,
      limit: 20
    }
    getCancelList({...params}).then((res) => {
      if (res?.code == 1) {
        state.cancelList = res?.result
      }  
    })
  }
  // 点击底部工文tab
  const changeTab2 = (item) => {
    state.tabId = item.id
  }
  const frontIndex = () => {
    
  }
</script>

<style lang="scss" scoped>
  .container{
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .head{
      width: 750rpx;
      height: 434rpx;
      border-bottom-right-radius: 72rpx;
      border-bottom-left-radius: 72rpx;
      background: radial-gradient(132.09% 132.09% at 50% 47%, rgba(27, 79, 215, 0.48) 0%, #184BC9 46.63%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0px;
        text-align: center;
        color: #ffffff;
      }
      .search{
        width: 510rpx;
        height: 92rpx;
        border-radius: 18rpx;
        margin-top: 30rpx;
        .searchInput{
        }
      }
    }
    .bottom{
      display: flex;
      // position: absolute;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: -60rpx;     
      // margin-top:378rpx;
      left:0;
      .tabs{
        width: 686rpx;
        height: 228rpx;
        // margin-left: 30.66rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        .tabItem{
          width: 210rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          position: relative;
          height: 100%;
          .left{
            height: 138rpx;
            border-right:4rpx dashed rgba(146, 146, 146, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 210rpx;
            margin-top: 56rpx;
            image{
              width: 52rpx;
              height: 54rpx;
            }
            text{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 16px;
              line-height: 100%;
              letter-spacing: 0px;
              text-align: center;
              color: rgba(165, 165, 165, 1);
              margin-top: 30rpx;
            }
          }
          
        }
        .tabItem:nth-last-child(1){
          .left{
            border-right: none;
          } 
        }
        .tabItemHover{
          text{
            color: rgba(11, 105, 218, 1);
          }
          .line{
            background:rgba(43, 90, 207, 1);
            height: 4rpx;
            width: 160rpx;
            box-shadow: 0 8rpx 8rpx 0 rgba(11, 105, 218, 1);
          }
        }
      }
      .tabsBottom{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 30rpx;
        width: 714rpx;
        .tabs2{
          display: flex;
          flex-direction: row;
          justify-content: center;
          width: 100%;
          border-bottom: 2rpx solid rgba(65, 65, 65, 1);
          padding-bottom:30rpx;
          .tabs2Item{
            width: 64rpx;
            height: 34rpx;
            border-radius: 6rpx;
            border: 2rpx solid rgba(107, 107, 107, 1); 
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            text-align: center;
            color: rgba(122, 122, 122, 1);
            margin-left: 30rpx;
            margin-right: 30rpx;
          }
          .tabs2ItemHover{
            border: 2rpx solid rgba(11, 105, 218, 1);
            background: rgba(209, 218, 243, 1);
            color: rgba(11, 105, 218, 1);
          }
        }
        .list{
          display: flex;
          flex-direction: column;
          width: 100%;
          .listItem{
            width: 100%;
            border-radius: 14rpx;
            margin-top:30rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .itemTop{
              width: 100%;
              height: 142rpx;
              border-radius: 14rpx;
              background: #ffffff;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              .left{
                margin-left: 48rpx;
                display: flex;
                flex-direction: row;
                image{
                  width: 102rpx;
                  height: 102rpx;
                  border-radius: 100%;
                }
                .leftRight{
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  width: 164rpx;
                  margin-left: 20rpx;
                  .h3{
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 32rpx;
                    color: rgba(70, 70, 70, 1);
                  }
                  .p{
                    margin-top: 10rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: rgba(169, 169, 169, 1);
                  }
                }
              }
              .middle{
                display: flex;
                flex-direction: column;
                align-items: center;
                .text01{
                  font-family: PingFang SC;
                  font-weight: 400;
                  font-size: 16rpx;
                  text-align: center;
                  color: rgba(35, 35, 35, 0.52);
                }
                .text02{
                  font-family: PingFang SC;
                  font-weight: 600;
                  font-size: 48rpx;
                  text-align: center;
                  color: rgba(62, 62, 62, 1);
                }
              }
              .right{
                margin-right: 48rpx;
              }
            }
            .itemBottom{
              width: 686rpx;
              // height: 100rpx;
              border-radius: 0 0 14rpx 14rpx;
              background: rgba(11, 105, 218, 0.25);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              padding-top:20rpx;
              padding-bottom: 20rpx;
              .top1{
                width: 100%;
                display: flex;
                align-items: center;
                flex-direction: row;
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 24rpx;
                text-align: center;
                color: rgba(122, 122, 122, 1);
                .text{
                  width: 116rpx;
                }
                .text01{
                  width: 220rpx;
                  overflow:hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .text02{
                  width: 50rpx;
                }
                .text03{
                  width: 220rpx;
                }
                .text04{
                  width: 50rpx;
                }
              }
              .top2{
                width: 650rpx;
                height: 64rpx;
                border-radius: 6rpx;
                background: rgba(209, 243, 241, 1);
                margin-top: 10rpx;
                display: flex;
                align-items: center;
                flex-direction: row;
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 20rpx;
                text-align: center;
                .text{
                  width: 116rpx;
                }
                .text01{
                  width: 200rpx;
                  overflow:hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .text02{
                  width: 50rpx;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: center;
                  .span{
                    width: 28rpx;
                    height: 26rpx;
                    border-radius: 6rpx;
                    border: 2rpx solid rgba(11, 105, 218, 1);
                  }
                  .spanHover{
                    background: rgba(28, 246, 21, 1);
                  }
                }
                .text03{
                  width: 220rpx;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: center;
                  .span{
                    width: 28rpx;
                    height: 26rpx;
                    border-radius: 6rpx;
                    border: 2rpx solid rgba(11, 105, 218, 1);
                    margin-right:6rpx;
                  }
                  .spanHover{
                    background: rgba(28, 246, 21, 1);
                  }
                }
                .text04{
                  width: 50rpx;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: center;
                  .span{
                    width: 28rpx;
                    height: 26rpx;
                    border-radius: 6rpx;
                    border: 2rpx solid rgba(11, 105, 218, 1);
                  }
                  .spanHover{
                    background: rgba(28, 246, 21, 1);
                  }
                }
              }
            }
          }
        }
      }
      .addBtn{
        width: 714rpx;
        height: 142rpx;
        border-radius: 14rpx;
        border: 2rpx solid rgba(0, 0, 0, 0.28);
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(231, 231, 231, 0.59);
        margin-top: 40rpx;
      }
    }
  }
  
</style>